/* eslint-disable react-hooks/exhaustive-deps */
import { warningCount } from '@/services/warning';
import ProCard from '@ant-design/pro-card'
import type { RadioChangeEvent } from 'antd';
import { Radio, Row, Space } from 'antd'
import React from 'react'
import { useEffect } from 'react';
import { useState } from 'react';
import styles from './index.less'
import WaitFollow from './WaitFollow';
import { history } from 'umi';
export default function LearnWarn() {
  const [current, setCurrent] = useState<string>("1")
  const changeStatus = (e: RadioChangeEvent) => {
    setCurrent(e.target.value)
  }
  const [count, setCount] = useState<number>(0)
  const [data, setData] = useState<any>()
  const { id } = history.location.query ?? {}
  const changeCount = () => {
    setCount(count + 1)
  }
  useEffect(() => {
    (async () => {
      const res = await warningCount({ activityId: id })
      setData(res?.result);
    })()
  }, [count])
  const tabs = [
    { value: '1', tabs: `待跟进(${data?.follow || 0})` },
    { value: '2', tabs: `待反馈(${data?.feedback || 0})` },
    { value: '3', tabs: `已完成(${data?.done || 0})` },
    { value: '4', tabs: `未完成(${data?.undone || 0})` },
  ]
  return (
    <div>
      <ProCard className={styles.card} direction="column" ghost gutter={[0, 16]}>
        <Row align="middle" style={{ height: '100%', paddingLeft: '20px' }} >
          <Radio.Group onChange={changeStatus} defaultValue="1" buttonStyle="solid">
            <Space>
              {
                tabs?.map((item: any) => {
                  return <Radio.Button key={item.value} value={item.value}>{item.tabs}</Radio.Button>
                })
              }
            </Space>
          </Radio.Group>

        </Row>

      </ProCard>
      {
        <WaitFollow current={current} changeCount={changeCount} />
      }
    </div>
  )
}
